Hace tiempo que aprendimos a añadir scroll en diferentes partes de nuestro blog, pero siempre se pasa algo por alto, y por suerte siempre hay alguien que se da cuenta como es el caso de koba que pregunta la forma de añadirlo a las entradas pero sin que aparezca el título.

Para añadir un scroll vamos a hacerlo añadiendo unas líneas a las CSS, o a los CSS (póngase el artículo que más les guste) para ser más concretos lo añadiremos justo antes de ]]></b:skin&gt; estas serían:

#scroll {
width:400px;
height:200px;
background-color:#333333;
overflow:auto;
}


Con overflow: auto sólo aparecerán las barras del scroll en caso de que el contenido sea mayor a las medidas que se añadieron en la plantilla.

Si deseamos que siempre aparezcan las barras del scroll en lugar de overflow: auto añadiremos overflow: scroll Si el contenido no excede las medidas las barras quedan deshabilitadas, en el momento que es mayor el contenido de habilitan.

Guardamos los cambios de nuestra plantilla y escribimos nuestro texto de la siguiente forma:

<div id="scroll">
<p>Contenido del scroll </p>
</div>


Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Podemos jugar un rato más con el scroll, y añadir una imagen de fondo en lugar de color con background:url('url_imagen');

Darle color a las fuentes con color:#308014;

Y si nos queda tiempo añadirle borde:

border-top: 2px solid #308014;
border-left: 2px solid #308014;
border-right: 2px solid #308014;
border-bottom: 2px solid #308014;

(Por cierto... esto es sólo una imagen )
Quedaría algo así:

#scroll {
width:400px;
height:200px;
overflow:auto;
color:#308014;
background:url('url_imagen');
border-top: 2px solid #308014;
border-left: 2px solid #308014;
border-right: 2px solid #308014;
border-bottom: 2px solid #308014;
}

Turko

Mmmh.. jeje me fui con el engaño de la imagen, y hasta después leí que lo era. :P

Muy buen efecto, siempre busque algo así para textos no muy extensos, utilizaba incrustar una venta y mostrar otra pagina. Gracias por el dato. :)

Responder
Anónimo

Gem@ gracias por el consejo y por la rapidez, ya lo he probado y me a funcionado correctamente a la primera.

Muchas gracias.

Responder
DDCoronilla

hola gem@, gracias por el scroll, bueno tengo un blog, y necesito ayuda, no se donde comentar, y he comentado en el más reciente, mi blog es http://photoshopddc.blogspot.com/ y puse el hack de leer más, pero se me queda un espacio sobrante, por favor ayudame.
Gracias :)

Responder
Anónimo

Hola Gema!yo uso el scroll hace tiempo,pero lo pongo solo donde y cdo lo necesito, es decir no lo tengo en la plantilla, y lo que he visto que según cambio el tema de mi navegador(firefox) el scroll se ve con diferentes colores y adornos, (hablo de las barritas no del fondo). Cómo se podría cambiar esto para diseñarlo con los colores que yo deseo?, vi otro de tus post donde dabas algunas instrucciones, pero a la hora de colocarlo no toma la configuracion de colores y sigue con la normal del tema del navegador.
Saluditos!!

Responder
Alexander Dmitrievich

Hola Gem@, te invito a tí y a todos los bloggers a formar parte del nuevo directorio de blogs de MundoSoviet, sólo entra a http://directorioms.blogspot.com y forma parte de esta nueva comunidad.
Un saludo, que estés bien.

Responder
Gem@

Me alegra que te sea útil Opcionez ;)

Gracias a ti koba :)

DDCoronilla no localizo en tu blog donde añadiste leer más ¿puedes dejarme un enlace a esa entrada?

Luzdeluna el scroll puedes personalizarlo en la misma entrada como lo vas haciendo. Añadiendo los estilos a la plantilla nos facilita no tener que hacerlo en la entrada cada vez que publicamos un post con scroll.
Referente a personalizar las barras hay un script pero no causa efecto con Firefox, sólo lo hace con Explorer. Puedes verlo aquí.

Gracias por la invitación Soviet :)

Responder
Anónimo

Esto si me ha quedado...

Que lindo con la imagen de fondo, me gusta bastante!!!.

Responder
Gem@

Que te gusta probar todo Birdelo :) :)

Responder
Anónimo

Me encantó! Pero me he quedado con una duda ._.

Ya pusé el scroll y me funcionó perfectamente, pero, lo que quiero es tener otro scroll con un tamaño diferente (ya que al poner el código sólo se muestra del tamaño 'default').. ¿Qué puedo hacer?

Muchas gracias :D

Responder
Gem@

Lo que hacemos entonces es crear otros estilos diferentes por ejemplo:
#scroll-2 {
width:600px;
height:200px;
background-color:#333333;
overflow:auto;
}

Y lo añadimos nombrado esa id que sería:
<div id="scroll-2">

<p>Contenido del scroll </p>

</div>

Responder
Anónimo

ya me agarró el vicio otra vez !
como hago para centrar el scroll dentro del post ( me aparece en el margen izquierdo y quiero centrarlo así como en el ejemplo )


jejo

Responder
Gem@

jajajaja me agarró el vicio dice :)
Lo centras con center.

<center><div id="scroll">
<p>Contenido del scroll </p>
</div>
</center>

Responder
Priamo

Hola Gema: He colocado un scroll en la sidebar con fondo de imagen y no logro ver el titulo del gadget correctamente ni lo logro modificar dado que la imagen se superpone. Mi blog de pruebas: priamo24.blogspot.com
un saludo de nuevo

Responder
Gem@

:: Priamo ¿no deberías añadir el título como en los otros gadgets?

#HTML1{
height:300px;
background-image:url(url-imagen);
overflow:auto;
}

#HTML1 h2{
font-family:comic sans ms;
font-size:10px;
color:#fff8dc;
font-weight:bold;
text-align:center;
margin-top:1px;
}


Por otra parte he visto que tienes esto:
<style type="text/css">
.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* width of menu */
}

esa línea en negrita puedes eliminarla no es necesario añadirla puesto que los estilos están añadidos en la hoja de estilos, se añadiría si estuvieran fuera antes de ]]><b:skin&gt; o después de ]]></b:skin&gt;

Responder
Priamo

He hecho lo que me dices pero sigue saliendo el Titulo dentro del scroll.
Mira a ver si he colocado bien el Widget.
gracias

Responder
Gem@

:: Pon el título fuera Priamo si lo añades dentro del código del scroll saldrá dentro.
<h2 class="title">COMPETICION</h2>

<center>
<div class="HTML1">
<a href="http://www.podiumslot.com/2008/v-open-de-espana-de-raid-slot-mas-raid-que-nunca/" target="_blank">
<img width="125" height="125" src="http://cjj8yq.blu.livefilestore.com/y1p7c7pzwYDWkiY_2HucGsPGJi1Hq9S8qiZYIuY_SkpO28qT2-SCfnsqkvvkgsjpcDRc9tXoQqiPPbdX1zED-SKgfdPiiCuRvek/120x120Enero%20cartel-F11.jpg"/>
</a>
<a href="http://www.podiumslot.com/2008/v-open-de-espana-de-raid-slot-mas-raid-que-nunca/" target="_blank">
<img width="200" height="290" src="http://4.bp.blogspot.com/_YXn2c6DAPgY/S0snRcDFFwI/AAAAAAAAD_c/CvX6N9Q1A7M/S1600-R/openraidslot2010.jpg"/>
</a>
</div>
</center>

Responder
Priamo

Por fin, conseguido. Muchas gracias de nuevo Gema

Responder
Priamo

Hola Gema, otra vez por aquí, me ha surgido un problema: Al ir a ubicar el Widget en otro lugar de la sidebar el Scroll se ha desplazado donde yo le he indicado pero el Titulo se ha quedado donde estaba. Podrias ayudarme,imagino que es problema de plantilla HTML pero no doy con la solucion. Muy agradecido.

Responder
Gem@

:: Priamo lo que vas a hacer es crear unos estilos para el scroll en lugar de crearlos para el gadget de esa forma lo solucionamos.

En los estilos en lugar de poner #HTML1 lo vas a cambiar por #scroll y luego editas el gadget y donde dice <div class="HTML1"> lo cambias por <div id="scroll"> de esa forma añades el título en el sitio ue corresponde en el gadget y verás como así queda siempre fuera del scroll.

Responder
Priamo

Hecho y funciona. Muchisimas gracias

Responder
Gem@

:: Estupendo :D

Responder
Juliette

Holii :3 mirá tengo un problema, el código en un principio me agarro perfectamente pero cuando quise poner el fondo es como que no lo identifico mas y no volvio a aparecer D: ¿Qué podría hacer?

Responder
Gem@

:: Dime donde lo tienes añadido y lo miro Ichigo :)

Responder
Maite

Gema, me ha venido de perlas esta entrada, fijate que alguna vez que veía scrolls pensaba que no me gustaban... pero hoy los he necesitado!!!!
Da gusto venir siempre, tanto y tan bien explicado todo. Besotessssssss :D

Responder
Gem@

:: Hola Maite, personalmente los scroll no me agradan demasiado por la estética de la barrita pero hay una solución para personalizar los colores aunque sólo se visualiza con IE.
Por si la quieres probar
http://gemablog-.blogspot.com/2007/10/scroll-con-barra-de-color.html ;)

Responder
Maite

Cielos! acabo de ir a verlo! una ventaja de IE sobre Fire? :D increible! pero lo dejo como está, que queda discretito :) Gracias!!

Responder
Gem@

:: Una ventaja no, yo diría mejor la única ventaja :D

Responder
Gabriel Villasante

Buenos dias disculpa estoy haciendo mi blog http://maxvillasante.blogspot.com/ y al instale el template oracle me muestra mis entrada en dos columnas como elimino eso que hace que no se muestren mis entradas
gracias

Responder
Gem@

:: Saludos Max, yo diría que es una plantilla Magazine y se puede comprobar al mostrar un mínimo de cuatro entradas. Siento no poder ayudarte porque no es original de Blogger y no sé como hacerlo, lo mejor es consultarlo con el autor de la plantilla, no sé si el idioma será un inconveniente pero parece que responde los comentarios en su blog.

Responder
Gabriel Villasante

Gracias de todos modos por su reapida respuesta... saludos

Responder
Gem@

:: Lamento no ser de más ayuda Max :S

Responder
taichicoslada

Hola Gema, he creado una entrada con un scroll con una etiqueta div style dentro de la entrada. Despues la he cambiado por lo que tu propones en esta intervención y el problema sigue siendo el mismo. Se trata de una tabla de dos columnas y más de 100 filas donde hay una minifoto y el enlace a un album y en la celda de al lado el enlace en texto. Pues resulta que si lo veo en Explorer IE8 el scroll funciona bien por que la tabla y el texto se mueve pero las fotos se quedan estáticas y se salen de la caja o limites del scroll sin moverse. En firefox funciona perfecto. La plantilla que utilizo es la de "Viaje" con fondo estatico. ¿Se te ocurre alguna solución? Un saludo.

Responder
Gem@

:: No veo motivo por el que la imagen quede estática, pero no he podido ver tu ejemplo para ser más concreta :S

Responder
taichicoslada

ok Gema, te he añadido al blog que como está en pruebas, no lo tengo en publico. la dirección (imagino que te irá en la invitación) es taichiyxinyi.blogspot.com
Por otro lado me gustaría saber si se puede configurar que cuando se responde o crea un comentario se notifique a quien lo ha hecho y no sólo al propietario del blog. Es decir, yo no se si me has respondido si no vuelvo a entrar en el blog donde hice la pregunta...
Gracias de nuevo

Responder
Gem@

:: taichicoslada he mirado tu ejemplo y no sabría decirte por qué la imagen queda estática, el tema de diferencias entre distintos navegadores es complicado, pero si te sirve de ayuda JMiur quizás pueda orientarte en ese tema.
Sobre el tema de saber si te han respondido al comentario es fácil, si accedes al blog estando logueado verás un enlace justo debajo del editor de comentarios que dice suscribirse por correo electrónico, se marca ese enlace y recibimos los nuevos comentarios que se hicieron después del nuestro en la bandeja de correo :)

Responder
taichicoslada

Muchisismas gracias por tu interés.:D
Siguiendo tu consejo acudí a JMiur de Vagabundia y ha resuelto el problema añadiendo position relative tal y como te muestro:

Sustituir en código () por > ó <

(div style="height: 200px; overflow: auto; width: 400px;position:relative;")**contenido**(/div) -Para colocarlo en cualquier lugar de la entrada sin tener que tocar en la plantilla-

Siguiendo el codigo que muestras en esta entrada:
#scroll {
height: 200px;
overflow: scroll;
width: 750px;
position:relative;
}

Ahora quiero compartir este código que pondríamos en cualquier parte de la entrada sin tener que modificar la plantilla y que nos permite parametrizar a nuetro gusto. Hay que advertir que funciona en IExplorer ya que Firefox los colores no cambian.

(div style="scrollbar-face-color: #000000; width: 400pt; height: 190pt; color: #000000; overflow: auto; border-color: #222222 #666666 #222222 #333333; border-style: double; position:relative;")**contenido**(/div)

Lo puedes ver en http://taichixinyi.wordpress.com/2010/06/10/fotos-alojadas-en-otros-sitios-y-videos/

Gracias y un saludo.

Responder
Gem@

:: Me alegra que resultara bien, estaba convencida que tendrías una respuesta acertada y con solución :)
Gracias por venir a compartirlo.

Responder
Be Bloggera

Puhca no se porque nome resulta :(

Responder
Gem@

:: Be inténtalo en algún blog de pruebas y me lo muestras que vea donde está el error ;)

Responder
Am

excelente tutorial no pense que fuera tan facil hacerlo y es super personalizable infinitas gracias!

ya lo estoy usando en mi blog: http://makemoneyvisualguide.blogspot.com/

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top